<!-- Description -->
<section id="description" class="card">
    <div class="card-header">
        <h4 class="card-title">Description</h4>
    </div>
    <div class="card-content">
        <div class="card-body">
            <div class="card-text">
                <p>Easily highlight new or unread items by adding tags & pills to links, Bootstrap navs, and more. Vertical Navigation menu items can contain tags and pills in all navigation levels. You can use any color tags and pills with flat or glow effect. Modern Admin horizontal navigation has tag & pills on left side.</p>
            </div>
        </div>
    </div>
</section>
<!--/ Description -->
<!-- Examples -->
<section id="examples" class="card">
    <div class="card-header">
        <h4 class="card-title">Examples</h4>
        <a class="heading-elements-toggle"><i class="la la-ellipsis-v font-medium-3"></i></a>
        <div class="heading-elements">
            <ul class="list-inline mb-0">
                <li><a data-action="collapse"><i class="ft-minus"></i></a></li>
                <li><a data-action="reload"><i class="ft-rotate-cw"></i></a></li>
                <li><a data-action="close"><i class="ft-x"></i></a></li>
            </ul>
        </div>
    </div>
    <div class="card-content">
        <div class="card-body">
            <div class="card-text">
                <div class="row">
                    <div class="col-md-6">
                        <p class="text-bold-600 mt-2">Tags example</p>
                        <span class="badge badge-default badge-default">Default</span>
                        <span class="badge badge-default badge-primary">Primary</span>
                        <span class="badge badge-default badge-success">Success</span>
                        <span class="badge badge-default badge-info">Info</span>
                        <span class="badge badge-default badge-warning">Warning</span>
                        <span class="badge badge-default badge-danger">Danger</span>
                        <p class="text-bold-600 mt-2">Tags with <code>.badge-pill</code> example</p>
                        <span class="badge badge-pill badge-default badge-default">Default</span>
                        <span class="badge badge-pill badge-default badge-primary">Primary</span>
                        <span class="badge badge-pill badge-default badge-success">Success</span>
                        <span class="badge badge-pill badge-default badge-info">Info</span>
                        <span class="badge badge-pill badge-default badge-warning">Warning</span>
                        <span class="badge badge-pill badge-default badge-danger">Danger</span>
                        <p class="text-bold-600 mt-2">Tags with <code>.badge-glow</code> & custom background and border color.</p>
                        <span class="badge badge-glow badge-default badge-info">Info</span>
                        <span class="badge badge-glow badge-pill badge-default badge-warning">Warning</span>
                        <span class="badge badge-glow badge-pill badge-default badge-danger">Danger</span>
                        <span class="badge badge-glow bg-teal border-teal border-darken-4">teal</span>
                        <span class="badge badge-glow bg-blue-grey  border-blue-grey border-darken-4">blue grey</span>
                        <span class="badge badge-glow bg-purple border-purple border-darken-4">purple</span>
                    </div>
                    <div class="col-md-6">
                        <p class="text-bold-600 mt-2">Tags (as pills)</p>
                        <span class="badge badge-pill badge-default badge-default">12</span>
                        <span class="badge badge-pill badge-default badge-primary">5</span>
                        <span class="badge badge-pill badge-default badge-success">8</span>
                        <span class="badge badge-pill badge-default badge-info">12</span>
                        <span class="badge badge-pill badge-default badge-warning">10</span>
                        <span class="badge badge-pill badge-default badge-danger">15</span>
                        <p class="text-bold-600 mt-2">Tags (as pills) with icons</p>
                        <span class="badge badge-pill badge-default badge-default"><i class="ft-activity font-small-2 font-medium-1"></i></span>
                        <span class="badge badge-pill badge-default badge-primary"><i class="ft-aperture font-medium-1"></i></span>
                        <span class="badge badge-pill badge-default badge-success"><i class="ft-award font-medium-1"></i></span>
                        <span class="badge badge-pill badge-default badge-info"><i class="ft-bookmark font-medium-1"></i></span>
                        <span class="badge badge-pill badge-default badge-warning"><i class="ft-camera font-medium-1"></i></span>
                        <span class="badge badge-pill badge-default badge-danger"><i class="ft-cpu font-medium-1"></i></span>
                        <p class="text-bold-600 mt-2">Tags (as pills) with <code>.badge-glow</code> & custom background and border color.</p>
                        <span class="badge badge-glow badge-pill badge-default badge-info">12</span>
                        <span class="badge badge-glow badge-pill badge-default badge-warning">50</span>
                        <span class="badge badge-glow badge-pill badge-default badge-danger">2</span>
                        <span class="badge badge-glow badge-pill bg-teal border-teal border-darken-4">9</span>
                        <span class="badge badge-glow badge-pill bg-blue-grey  border-blue-grey border-darken-4">11</span>
                        <span class="badge badge-glow badge-pill bg-purple border-purple border-darken-4">100</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="card-body">
            <div class="header-navbar navbar-expand-sm navbar-horizontal navbar-dark navbar-shadow border-grey border-darken-2">
                <!-- Horizontal menu content-->
                <div data-menu="menu-container" class="header-navbar navbar-expand-sm navbar-container ml-0">
                    <ul data-menu="menu-navigation" class="nav navbar-nav">
                        <li class="nav-item"><a href="index.html" class="nav-link"><i class="ft-home"></i><span> Dashboard</span> <span class="badge badge-glow badge-pill badge-default badge-info">5</span></a></li>
                        <li data-menu="megamenu" class="dropdown mega-dropdown nav-item"><a href="#" data-toggle="dropdown" class="dropdown-toggle nav-link"><i class="ft-disc"></i><span>Mega Menu</span></a>
                            <ul class="mega-dropdown-menu dropdown-menu row">
                                <li data-mega-col="col-md-3" class="col-md-3">
                                    <ul class="drilldown-menu">
                                        <li class="menu-list">
                                            <ul class="mega-menu-sub">
                                                <li><a href="#" class="dropdown-item"><i class="ft-disc"></i>First Link col-1 <span class="badge badge-pill badge-warning float-right">2</span></a>
                                                </li>
                                                <li><a href="#" class="dropdown-item"><i class="ft-disc"></i>Second Link col-1 link</a>
                                                    <ul class="mega-menu-sub">
                                                        <li><a href="#" class="dropdown-item"><i class="ft-disc"></i>submenu level 2 <span class="badge badge-pill badge-danger float-right">5</span></a>
                                                        </li>
                                                        <li><a href="#" class="dropdown-item"><i class="ft-disc"></i>submenu level 2</a>
                                                        </li>
                                                        <li><a href="#" class="dropdown-item"><i class="ft-disc"></i>submenu level 2 link</a>
                                                            <ul class="mega-menu-sub">
                                                                <li><a href="#" class="dropdown-item"><i class="ft-disc"></i>submenu level 3</a>
                                                                </li>
                                                                <li><a href="#" class="dropdown-item"><i class="ft-disc"></i>submenu level 3</a>
                                                                </li>
                                                                <li><a href="#" class="dropdown-item"><i class="ft-disc"></i>submenu level 3</a>
                                                                </li>
                                                                <li><a href="#" class="dropdown-item"><i class="ft-disc"></i>submenu level 3</a>
                                                                </li>
                                                            </ul>
                                                        </li>
                                                        <li><a href="#" class="dropdown-item"><i class="ft-disc"></i>submenu level 2</a>
                                                        </li>
                                                    </ul>
                                                </li>
                                                <li><a href="#" class="dropdown-item"><i class="ft-disc"></i>Third Link col-1</a>
                                                </li>
                                                <li><a href="#" class="dropdown-item"><i class="ft-disc"></i>Fourth Link col-1</a>
                                                </li>
                                            </ul>
                                        </li>
                                    </ul>
                                </li>
                                <li data-mega-col="col-md-3" class="col-md-3">
                                    <h6 data-toggle="dropdown" class="dropdown-menu-header text-uppercase"><i class="la la-cog"></i>Column 2 title</h6>
                                    <ul class="drilldown-menu">
                                        <li class="menu-list">
                                            <ul class="mega-menu-sub">
                                                <li><a href="#" class="dropdown-item"><i class="ft-disc"></i>First Link col-2</a>
                                                </li>
                                                <li><a href="#" class="dropdown-item"><i class="ft-disc"></i>Second Link col-2</a>
                                                    <ul class="mega-menu-sub">
                                                        <li><a href="#" class="dropdown-item"><i class="ft-disc"></i>submenu level 2</a>
                                                        </li>
                                                        <li><a href="#" class="dropdown-item"><i class="ft-disc"></i>submenu level 2</a>
                                                        </li>
                                                        <li><a href="#" class="dropdown-item"><i class="ft-disc"></i>submenu level 2 link</a>
                                                            <ul class="mega-menu-sub">
                                                                <li><a href="#" class="dropdown-item"><i class="ft-disc"></i>submenu level 3</a>
                                                                    <ul class="mega-menu-sub">
                                                                        <li><a href="#" class="dropdown-item"><i class="ft-disc"></i>submenu level 2</a>
                                                                        </li>
                                                                        <li><a href="#" class="dropdown-item"><i class="ft-disc"></i>submenu level 2</a>
                                                                        </li>
                                                                    </ul>
                                                                </li>
                                                                <li><a href="#" class="dropdown-item"><i class="ft-disc"></i>submenu level 3</a>
                                                                </li>
                                                                <li><a href="#" class="dropdown-item"><i class="ft-disc"></i>submenu level 3</a>
                                                                </li>
                                                                <li><a href="#" class="dropdown-item"><i class="ft-disc"></i>submenu level 3</a>
                                                                </li>
                                                            </ul>
                                                        </li>
                                                        <li><a href="#" class="dropdown-item"><i class="ft-disc"></i>submenu level 2</a>
                                                        </li>
                                                    </ul>
                                                </li>
                                                <li><a href="#" class="dropdown-item"><i class="ft-disc"></i>Third Link col-2</a>
                                                </li>
                                                <li><a href="#" class="dropdown-item"><i class="ft-disc"></i>Fourth Link col-2</a>
                                                </li>
                                            </ul>
                                        </li>
                                    </ul>
                                </li>
                                <li data-mega-col="col-md-3" class="col-md-3">
                                    <h6 data-toggle="dropdown" class="dropdown-menu-header text-uppercase"><i class="la la-cog"></i>Column 3 title</h6>
                                    <ul class="drilldown-menu">
                                        <li class="menu-list">
                                            <ul class="mega-menu-sub">
                                                <li><a href="#" class="dropdown-item"><i class="ft-disc"></i>First Link col-3</a>
                                                </li>
                                                <li><a href="#" class="dropdown-item"><i class="ft-disc"></i>Second Link col-3</a>
                                                    <ul class="mega-menu-sub">
                                                        <li><a href="#" class="dropdown-item"><i class="ft-disc"></i>submenu level 2</a>
                                                        </li>
                                                        <li><a href="#" class="dropdown-item"><i class="ft-disc"></i>submenu level 2</a>
                                                        </li>
                                                        <li><a href="#" class="dropdown-item"><i class="ft-disc"></i>submenu level 2 link</a>
                                                            <ul class="mega-menu-sub">
                                                                <li><a href="#" class="dropdown-item"><i class="ft-disc"></i>submenu level 3</a>
                                                                </li>
                                                                <li><a href="#" class="dropdown-item"><i class="ft-disc"></i>submenu level 3</a>
                                                                </li>
                                                                <li><a href="#" class="dropdown-item"><i class="ft-disc"></i>submenu level 3</a>
                                                                </li>
                                                                <li><a href="#" class="dropdown-item"><i class="ft-disc"></i>submenu level 3</a>
                                                                </li>
                                                            </ul>
                                                        </li>
                                                        <li><a href="#" class="dropdown-item"><i class="ft-disc"></i>submenu level 2</a>
                                                        </li>
                                                    </ul>
                                                </li>
                                                <li><a href="#" class="dropdown-item"><i class="ft-disc"></i>Third Link col-3</a>
                                                </li>
                                                <li><a href="#" class="dropdown-item"><i class="ft-disc"></i>Fourth Link col-3</a>
                                                </li>
                                            </ul>
                                        </li>
                                    </ul>
                                </li>
                                <li data-mega-col="col-md-3" class="col-md-3">
                                    <h6 data-toggle="dropdown" class="dropdown-menu-header text-uppercase"><i class="la la-cog"></i>Column 4 title</h6>
                                    <ul class="drilldown-menu">
                                        <li class="menu-list">
                                            <ul class="mega-menu-sub">
                                                <li><a href="#" class="dropdown-item"><i class="ft-disc"></i>First Link col-4</a>
                                                </li>
                                                <li><a href="#" class="dropdown-item"><i class="ft-disc"></i>Second Link col-4</a>
                                                    <ul class="mega-menu-sub">
                                                        <li><a href="#" class="dropdown-item"><i class="ft-disc"></i>submenu level 2</a>
                                                        </li>
                                                        <li><a href="#" class="dropdown-item"><i class="ft-disc"></i>submenu level 2</a>
                                                        </li>
                                                        <li><a href="#" class="dropdown-item"><i class="ft-disc"></i>submenu level 2 link</a>
                                                            <ul class="mega-menu-sub">
                                                                <li><a href="#" class="dropdown-item"><i class="ft-disc"></i>submenu level 3</a>
                                                                </li>
                                                                <li><a href="#" class="dropdown-item"><i class="ft-disc"></i>submenu level 3</a>
                                                                </li>
                                                                <li><a href="#" class="dropdown-item"><i class="ft-disc"></i>submenu level 3</a>
                                                                </li>
                                                                <li><a href="#" class="dropdown-item"><i class="ft-disc"></i>submenu level 3</a>
                                                                </li>
                                                            </ul>
                                                        </li>
                                                        <li><a href="#" class="dropdown-item"><i class="ft-disc"></i>submenu level 2</a>
                                                        </li>
                                                    </ul>
                                                </li>
                                                <li><a href="#" class="dropdown-item"><i class="ft-disc"></i>Third Link col-4</a>
                                                </li>
                                                <li><a href="#" class="dropdown-item"><i class="ft-disc"></i>Fourth Link col-4</a>
                                                </li>
                                            </ul>
                                        </li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                        <li data-menu="dropdown" class="dropdown nav-item"><a href="#" data-toggle="dropdown" class="dropdown-toggle nav-link"><i class="la la-cog"></i><span>Menu Large</span></a>
                            <ul class="dropdown-menu">
                                <li class=" navigation-header"><span>Main</span></li>
                                <li data-menu=""><a href="#" data-toggle="dropdown" class="dropdown-item">Second level</a>
                                </li>
                                <li data-menu=""><a href="#" data-toggle="dropdown" class="dropdown-item">Second level <span class="badge badge-success float-right">new</span></a>
                                </li>
                                <li data-menu=""><a href="#" data-toggle="dropdown" class="dropdown-item">Second level</a>
                                </li>
                                <li data-menu=""><a href="#" data-toggle="dropdown" class="dropdown-item">Second level</a>
                                </li>
                                <li data-menu=""><a href="#" data-toggle="dropdown" class="dropdown-item">Second level</a>
                                </li>
                                <li data-menu=""><a href="#" data-toggle="dropdown" class="dropdown-item">Second level</a>
                                </li>
                                <li data-menu=""><a href="#" data-toggle="dropdown" class="dropdown-item">Second level</a>
                                </li>
                                <li data-menu=""><a href="#" data-toggle="dropdown" class="dropdown-item">Second level</a>
                                </li>
                                <li data-menu=""><a href="#" data-toggle="dropdown" class="dropdown-item">Second level</a>
                                </li>
                                <li data-menu=""><a href="#" data-toggle="dropdown" class="dropdown-item">Second level</a>
                                </li>
                                <li data-menu=""><a href="#" data-toggle="dropdown" class="dropdown-item">Second level</a>
                                </li>
                                <li data-menu=""><a href="#" data-toggle="dropdown" class="dropdown-item">Second level</a>
                                </li>
                                <li data-menu=""><a href="#" data-toggle="dropdown" class="dropdown-item">Second level</a>
                                </li>
                                <li data-menu=""><a href="#" data-toggle="dropdown" class="dropdown-item">Second level</a>
                                </li>
                                <li data-menu="dropdown-submenu" class="dropdown dropdown-submenu"><a href="#" data-toggle="dropdown" class="dropdown-item dropdown-toggle">Second level with child</a>
                                    <ul class="dropdown-menu">
                                        <li data-menu=""><a href="#" data-toggle="dropdown" class="dropdown-item">Third level</a>
                                        </li>
                                        <li data-menu="dropdown-submenu" class="dropdown dropdown-submenu"><a href="#" data-toggle="dropdown" class="dropdown-item dropdown-toggle">Third level with child</a>
                                            <ul class="dropdown-menu">
                                                <li data-menu=""><a href="#" data-toggle="dropdown" class="dropdown-item">Fourth level</a>
                                                </li>
                                                <li data-menu=""><a href="#" data-toggle="dropdown" class="dropdown-item">Fourth level</a>
                                                </li>
                                            </ul>
                                        </li>
                                    </ul>
                                </li>
                                <li data-menu=""><a href="#" data-toggle="dropdown" class="dropdown-item">Second level</a>
                                </li>
                            </ul>
                        </li>
                        <li data-menu="dropdown" class="dropdown nav-item"><a href="#" data-toggle="dropdown" class="dropdown-toggle nav-link"><i class="ft-monitor"></i><span>Menu levels</span></a>
                            <ul class="dropdown-menu">
                                <li data-menu=""><a href="#" data-toggle="dropdown" class="dropdown-item disabled">Second level</a>
                                </li>
                                <li data-menu="dropdown-submenu" class="dropdown dropdown-submenu"><a href="#" data-toggle="dropdown" class="dropdown-item dropdown-toggle">Second level with child</a>
                                    <ul class="dropdown-menu">
                                        <li data-menu=""><a href="#" data-toggle="dropdown" class="dropdown-item">Third level</a>
                                        </li>
                                        <li data-menu="dropdown-submenu" class="dropdown dropdown-submenu"><a href="#" data-toggle="dropdown" class="dropdown-item dropdown-toggle">Third level with child</a>
                                            <ul class="dropdown-menu">
                                                <li data-menu=""><a href="#" data-toggle="dropdown" class="dropdown-item disabled">Fourth level</a>
                                                </li>
                                                <li data-menu=""><a href="#" data-toggle="dropdown" class="dropdown-item">Fourth level</a>
                                                </li>
                                            </ul>
                                        </li>
                                    </ul>
                                </li>
                                <li data-menu=""><a href="#" data-toggle="dropdown" class="dropdown-item">Second level</a>
                                </li>
                            </ul>
                        </li>
                    </ul>
                    <ul class="nav navbar-nav float-right">
                        <li class="dropdown dropdown-language nav-item"><a id="dropdown-flag1" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="dropdown-toggle nav-link"><i class="flag-icon flag-icon-gb"></i><span class="selected-language">English</span><i class="caret"></i></a>
                            <div class="dropdown-menu dropdown-menu-right"><a href="#" class="dropdown-item"><i class="flag-icon flag-icon-gb"></i> English</a><a href="#" class="dropdown-item"><i class="flag-icon flag-icon-es"></i> Spanish</a><a href="#" class="dropdown-item"><i class="flag-icon flag-icon-pt"></i> Portuguese</a>
                                <a href="#" class="dropdown-item"><i class="flag-icon flag-icon-fr"></i> French</a>
                            </div>
                        </li>
                        <li class="dropdown dropdown-user nav-item"><a href="#" data-toggle="dropdown" class="dropdown-toggle nav-link dropdown-user-link"><span class="avatar avatar-online"><img src="../../../app-assets/images/portrait/small/avatar-s-1.png" alt="avatar"><i></i></span>
                <h6 class="user-name"> John Doe</h6><i class="caret"></i></a>
                            <div class="dropdown-menu dropdown-menu-right">
                                <a href="#" class="dropdown-item"><i class="ft-user"></i> Edit Profile</a>
                                <a href="#" class="dropdown-item"><i class="ft-mail"></i> My Inbox</a>
                                <a href="#" class="dropdown-item">
                                    <i class="ft-check-square"></i> Task</a>
                                <a href="#" class="dropdown-item"><i class="ft-message-square"></i> Calender</a>
                                <div class="dropdown-divider"></div>
                                <a href="#" class="dropdown-item"><i class="ft-power"></i> Logout</a>
                            </div>
                        </li>
                    </ul>
                </div>
                <!-- /horizontal menu content-->
            </div>
        </div>
    </div>
</section>
<!--/ Examples -->
<!-- CSS Classes -->
<section id="css-classes" class="card">
    <div class="card-header">
        <h4 class="card-title">CSS Classes</h4>
        <a class="heading-elements-toggle"><i class="la la-ellipsis-v font-medium-3"></i></a>
        <div class="heading-elements">
            <ul class="list-inline mb-0">
                <li><a data-action="collapse"><i class="ft-minus"></i></a></li>
                <li><a data-action="reload"><i class="ft-rotate-cw"></i></a></li>
                <li><a data-action="close"><i class="ft-x"></i></a></li>
            </ul>
        </div>
    </div>
    <div class="card-content">
        <div class="card-body">
            <div class="card-text">
                <div class="card-tags-wrapper">
                    <h5 class="card-title mt-2">Tags</h5>
                    <p>This table contains all classes related to the horizontal navigation with tags option. Tags scale to match the size of the immediate parent element by using relative font sizing and <code>em</code> units.</p>
                    <p>All these options can be set via following classes:</p>
                    <div class="table-responsive">
                        <table class="table table-hover">
                            <thead>
                                <tr>
                                    <th >Classes</th>
                                    <th>Description</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <th scope="row"><code>.badge</code></th>
                                    <td>This is tags basic class must have to add for creating tags.</td>
                                </tr>
                                <tr>
                                    <th class="row"><code>.badge-pill</code></th>
                                    <td>Use the <code>.badge-pill</code> modifier class to make tags more rounded (with a larger <code>border-radius</code> and additional horizontal <code>padding</code>).</td>
                                </tr>
                                <tr>
                                    <th scope="row">
                                        <code>.badge-default badge-default</code>
                                        <br/>
                                        <code>.badge-default badge-primary</code>
                                        <br/>
                                        <code>.badge-default badge-success</code>
                                        <br/>
                                        <code>.badge-default badge-info</code>
                                        <br/>
                                        <code>.badge-default badge-warning</code>
                                        <br/>
                                        <code>.badge-default badge-danger</code>
                                        <br/>
                                    </th>
                                    <td>Add any of the mentioned modifier classes to change the appearance of a tag.</td>
                                </tr>
                                <tr>
                                    <th scope="row"><code>.badge-glow</code></th>
                                    <td>Add this class to add glow effect to tags or pills. This is optional class.</td>
                                </tr>
                                <tr>
                                    <th scope="row"><code>.bg-[color]</code></th>
                                    <td>
                                        <p>To set the dark navbar background color use <code>.bg-[color]</code> class where <code>[color]</code> is the value of your selected color from modern color palette. So for teal color background class will be <code>.bg-teal</code>. Refer HTML markup line no 2. Background color class is a optional if you don't it will take white background default.</p>
                                    </td>
                                </tr>
                                <tr>
                                    <th scope="row"><code>.bg-darken-[*]</code></th>
                                    <td>
                                        <p>To set the selected background color darken use <code>.bg-darken-[*]</code> class where <code>[*]</code> is the value between '1-5' of your selected darken color from modern color palette. So for color darken 4 background class will be <code>.bg-darken-4</code>. Refer HTML markup line no 2. Background darken color class is a optional if you don't it will take white background default.</p>
                                        <p><code>.bg-darken-[*]</code> class will work only if you have used <code>.bg-[color]</code>.</p>
                                    </td>
                                </tr>
                                <tr>
                                    <th scope="row"><code>.border-[color]</code></th>
                                    <td>
                                        <p>To set the dark navbar border color use <code>.border-[color]</code> class where <code>[color]</code> is the value of your selected color from modern color palette. So for teal color border class will be <code>.bg-teal</code>. Refer HTML markup line no 2. Border color class is a optional.</p>
                                    </td>
                                </tr>
                                <tr>
                                    <th scope="row"><code>.border-darken-[color]</code></th>
                                    <td>
                                        <p>To set the selected border color darken use <code>.border-darken-[*]</code> class where <code>[*]</code> is the value between '1-5' of your selected darken color from modern color palette. So for color darken 4 border class will be
                                            <code>.border-darken-4</code>. Refer HTML markup line no 2. Border darken color class is a optional.</p>
                                        <p><code>.border-darken-[*]</code> class will work only if you have used <code>.border-[color]</code>.</p>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!--/ CSS Classes -->
<!-- HTML Markup -->
<section id="html-markup" class="card">
    <div class="card-header">
        <h4 class="card-title">HTML Markup</h4>
        <a class="heading-elements-toggle"><i class="la la-ellipsis-v font-medium-3"></i></a>
        <div class="heading-elements">
            <ul class="list-inline mb-0">
                <li><a data-action="collapse"><i class="ft-minus"></i></a></li>
                <li><a data-action="reload"><i class="ft-rotate-cw"></i></a></li>
                <li><a data-action="close"><i class="ft-x"></i></a></li>
            </ul>
        </div>
    </div>
    <div class="card-content">
        <div class="card-body">
            <div class="card-text">
                <p>This section contains HTML Markup to add tags & pils to vertical navigation menu with options.</p>
                <ul>
                    <li><span class="text-bold-600">Line no 16 & 22:</span> Contain the <code>&lt;span class="badge badge-default badge-info float-right"&gt;1.2.2&lt;/span&gt;</code> html code to add tag or badge to the menu items.</li>
                </ul>
                <pre data-line="16, 22" class="language-markup">
          <code class="language-markup">
            &lt;!DOCTYPE html&gt;
            &lt;html lang="en"&gt;
            &lt;head&gt;&lt;/head&gt;
            &lt;body data-open="click" data-menu="horizontal-menu" class="horizontal-layout horizontal-menu 1-column menu-expanded"&gt;

              &lt;!-- navbar-static-top--&gt;
              &lt;nav role="navigation" class="header-navbar navbar-expand-sm navbar navbar-with-menu navbar-static-top navbar-dark navbar-shadow navbar-border"&gt;
              ...
              &lt;/nav&gt;

              &lt;!-- START  Horizontal navigation --&gt;
              &lt;div role="navigation" data-menu="menu-wrapper" class="header-navbar navbar-expand-sm menu-icon-right navbar navbar-horizontal navbar-dark navbar-shadow border-grey border-darken-2"&gt;
                &lt;!-- Horizontal menu content--&gt;
                
                &lt;div data-menu="menu-container" class="navbar-container"&gt;
                  &lt;ul id="main-menu-navigation1" data-menu="menu-navigation" class="nav navbar-nav"&gt;
                    &lt;li class="nav-item"&gt;&lt;a href="index.html" class="nav-link"&gt;&lt;i class="la la-lock"&gt;&lt;/i&gt;&lt;span&gt; &lt;span class="badge badge-pill badge-default badge-danger"&gt;5&lt;/span&gt; Dashboard&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                    &lt;li data-menu="dropdown" class="dropdown nav-item"&gt;&lt;a href="#" data-toggle="dropdown" class="dropdown-toggle nav-link"&gt;&lt;i class="la la-tv"&gt;&lt;/i&gt;&lt;span&gt;My Menu&lt;/span&gt;&lt;/a&gt;
                      &lt;ul class="dropdown-menu"&gt;
                        &lt;li class=" navigation-header"&gt;&lt;span&gt;Main&lt;/span&gt;&lt;/li&gt;
                        &lt;li data-menu=""&gt;&lt;a href="#" data-toggle="dropdown" class="dropdown-item"&gt;Second level&lt;/a&gt;&lt;/li&gt;
                        &lt;li data-menu=""&gt;&lt;a href="#" data-toggle="dropdown" class="dropdown-item"&gt; &lt;span class="badge badge-glow badge-pill badge-default badge-info"&gt;2&lt;/span&gt; Second level&lt;/a&gt;&lt;/li&gt;
                        &lt;li data-menu=""&gt;&lt;a href="#" data-toggle="dropdown" class="dropdown-item"&gt;Second level&lt;/a&gt;&lt;/li&gt;
                        &lt;li data-menu=""&gt;&lt;a href="#" data-toggle="dropdown" class="dropdown-item"&gt;Second level&lt;/a&gt;&lt;/li&gt;
                        &lt;li data-menu=""&gt;&lt;a href="#" data-toggle="dropdown" class="dropdown-item"&gt;Second level&lt;/a&gt;&lt;/li&gt;
                        &lt;li data-menu=""&gt;&lt;a href="#" data-toggle="dropdown" class="dropdown-item"&gt;Second level&lt;/a&gt;&lt;/li&gt;
                        &lt;li data-menu=""&gt;&lt;a href="#" data-toggle="dropdown" class="dropdown-item"&gt;Second level&lt;/a&gt;&lt;/li&gt;
                        &lt;li data-menu=""&gt;&lt;a href="#" data-toggle="dropdown" class="dropdown-item"&gt;Second level&lt;/a&gt;&lt;/li&gt;
                        &lt;li data-menu=""&gt;&lt;a href="#" data-toggle="dropdown" class="dropdown-item"&gt;Second level&lt;/a&gt;&lt;/li&gt;
                        &lt;li data-menu=""&gt;&lt;a href="#" data-toggle="dropdown" class="dropdown-item"&gt;Second level&lt;/a&gt;&lt;/li&gt;
                        &lt;li data-menu=""&gt;&lt;a href="#" data-toggle="dropdown" class="dropdown-item"&gt;Second level&lt;/a&gt;&lt;/li&gt;
                        &lt;li data-menu=""&gt;&lt;a href="#" data-toggle="dropdown" class="dropdown-item"&gt;Second level&lt;/a&gt;&lt;/li&gt;
                        &lt;li data-menu=""&gt;&lt;a href="#" data-toggle="dropdown" class="dropdown-item"&gt;Second level&lt;/a&gt;&lt;/li&gt;
                        &lt;li data-menu=""&gt;&lt;a href="#" data-toggle="dropdown" class="dropdown-item"&gt;Second level&lt;/a&gt;&lt;/li&gt;
                        &lt;li data-menu="dropdown-submenu" class="dropdown dropdown-submenu"&gt;&lt;a href="#" data-toggle="dropdown" class="dropdown-item dropdown-toggle"&gt;Second level with child&lt;/a&gt;
                          &lt;ul class="dropdown-menu"&gt;
                            &lt;li data-menu=""&gt;&lt;a href="#" data-toggle="dropdown" class="dropdown-item"&gt;Third level&lt;/a&gt;&lt;/li&gt;
                            &lt;li data-menu="dropdown-submenu" class="dropdown dropdown-submenu"&gt;&lt;a href="#" data-toggle="dropdown" class="dropdown-item dropdown-toggle"&gt;Third level with child&lt;/a&gt;
                              &lt;ul class="dropdown-menu"&gt;
                                &lt;li data-menu=""&gt;&lt;a href="#" data-toggle="dropdown" class="dropdown-item"&gt; &lt;span class="badge badge-pill badge-default badge-warning"&gt;New&lt;/span&gt;  Fourth level&lt;/a&gt;&lt;/li&gt;
                                &lt;li data-menu=""&gt;&lt;a href="#" data-toggle="dropdown" class="dropdown-item"&gt;Fourth level&lt;/a&gt;&lt;/li&gt;
                              &lt;/ul&gt;
                            &lt;/li&gt;
                          &lt;/ul&gt;
                        &lt;/li&gt;
                      &lt;li data-menu=""&gt;&lt;a href="#" data-toggle="dropdown" class="dropdown-item"&gt;Second level&lt;/a&gt;&lt;/li&gt;
                    &lt;/ul&gt;
                    &lt;/li&gt;
                  &lt;/ul&gt;
                &lt;/div&gt;
                &lt;!-- /horizontal menu content--&gt;
              &lt;/div&gt;
              &lt;!-- END  Horizontal navigation --&gt;

              &lt;!-- BEGIN Content--&gt;
              &lt;div class="content app-content"&gt;
              &lt;div class="content-wrapper"&gt;
              &lt;!-- content header--&gt;
              &lt;div class="content-header row"&gt;
              ...
              &lt;/div&gt;
              &lt;!-- content header--&gt;

              &lt;!-- content body--&gt;
              &lt;div class="content-body"&gt;
              ...
              &lt;/div&gt;
              &lt;!-- content body--&gt;

              &lt;/div&gt;
              &lt;/div&gt;
              &lt;!-- END Content--&gt;

              &lt;!-- START FOOTER DARK--&gt;
              &lt;footer class="footer footer-dark"&gt;
              ...
              &lt;/footer&gt;
              &lt;!-- START FOOTER DARK--&gt;

            &lt;/body&gt;
            &lt;/html&gt;
          </code>
          </pre>
            </div>
        </div>
    </div>
</section>
<!--/ HTML Markup -->
<!-- PUG Code -->
<section class="card">
    <div id="pug-configuration" class="card-header">
        <h4 class="card-title">PUG Configuration</h4>
        <a class="heading-elements-toggle"><i class="la la-ellipsis-v font-medium-3"></i></a>
        <div class="heading-elements">
            <ul class="list-inline mb-0">
                <li><a data-action="collapse"><i class="ft-minus"></i></a></li>
                <li><a data-action="reload"><i class="ft-rotate-cw"></i></a></li>
                <li><a data-action="close"><i class="ft-x"></i></a></li>
            </ul>
        </div>
    </div>
    <div class="card-content">
        <div class="card-body">
            <div class="card-text">
                <p>Modern Admin use PUG as template engine to generate pages and whole template quickly using node js, for getting start with PUG usage & template generating process please refer template documentation.</p>
                <h5 class="card-title mt-2">Menu JSON Configurations</h5>
                <div class="table-responsive">
                    <table class="table table-hover">
                        <thead>
                            <tr>
                                <th >Options</th>
                                <th>Description</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <th scope="row"><code>tag</code></th>
                                <td>Add the tag or Badge any text or icon you want to display.</td>
                            </tr>
                            <tr>
                                <th scope="row"><code>tag custom</code></th>
                                <td>Configure your tag classes as per your requirements, you can use any classes combination from above CSS Classes table. i.e <code>"badge badge-glow badge-pill badge-default badge-danger"</code></td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <h5 class="card-title mt-2">PUG Code</h5>
                <p>You need to add tags and pills options to menu JSON object, please read the documentation to customize the menu using PUG.</p>
                <ul>
                    <li><span class="text-bold-600">Line no 18 & 24:</span> Contain menu tags and pills JSON configurations options.</li>
                </ul>
                <p>Modern Admin use the common menu JSON object to generate same menu on each pages of your template that will save your time by reducing the repetitive menu customization task on each page. This template has menu example pug file for every layouts, Here in below example, it shows horizontal menu layout menu PUG file <code>horizontal-menu.pug</code>, you can use it on template level only it will generate whole template with the same menu options.</p>
                <pre data-line="18, 24" data-line-offset="12" class="language-json">
                <code class="language-json">
                    +horizontalMenu([
                    //- Main Navigation Header
                    {navheader:"Main",icon:"la la-ellipsis-h"},

                      //- Dashboard
                      {url:"index.html",name:"Dashboard",slug:"dashboard",icon:"la la-home", tag:"New" , tagcustom: "badge badge-default badge-danger"},

                      //- Layouts Start
                      {url:"#",name:"Layouts",slug:"",icon:"la la-bookmark",
                        //- Layouts Submenu
                        submenu:[
                          {url:"#",name:"Layout 1",slug:"", tag:"2", tagcustom: "badge badge-glow badge-pill bg-teal border-teal border-darken-4"},
                          {url:"#",name:"Layout 2",slug:""},
                          {url:"#",name:"Layout 3",slug:""},
                          {url:"#",name:"Layout 4",slug:""},
                          {url:"#",name:"Layout 5",slug:"",classlist:"disabled",menuSubtitle:"Coming soon"},
                        ]
                      },
                      //- Layouts End
            ]);
          </code>
        </pre>
            </div>
        </div>
    </div>
</section>
<!--/ PUG Code -->
